<!--
 * @Author:刘欣玥
 * @email: 413157399@qq.com
 * @Date: 2022-07-12 23:36:45
-->
<template>
  <div class="app-container">
    <!-- ref="form"
      :model="form" -->
    <el-form :rules="rules" size="small" label-width="150px">
      <el-form-item label="广告名称:">
        <el-input v-model="form.name" style="width: 370px" />
      </el-form-item>
      <el-form-item label="图片上传">
        <el-upload class="avatar-uploader" :action="interurl" :show-file-list="false" :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload" :http-request="upLoad" :file-list="fileList">
                 
          <!--  :data="{
            type: 'avatar',
            path: 20220718,
          }" -->
                     <img v-if="imageUrl" :src="imageUrl" :v-model="imageUrl" class="avatar" />
                                 
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>        
        </el-upload>
               
        <el-form-item>
                   
          <el-button type="primary" class="filter-item" style="margin-top: 10px" size="small"
            @click="dialogTableVisible = true">选择活动</el-button>
                 
        </el-form-item>
               
        <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="" />        
        </el-dialog>
             
      </el-form-item>
           
      <el-form-item label="广告权重">
                <el-radio v-model="form.weights" label="1">随机</el-radio>      
          <el-radio v-model="form.weights" label="2">顺序</el-radio>        
        <el-radio v-model="form.weights" label="3">首张</el-radio>      
      </el-form-item>
           
      <el-form-item label="开屏广告时间">
               
        <el-input v-model="form.durationTime" style="width: 100px; margin-right: 10px" />秒      
      </el-form-item>

           
      <!-- <el-form-item label="商品视屏">
        <div><video style="width: 400px !important;height: 450px !important;" src="" controls></video>
        </div>
        <el-button type="primary" @click="fileChanges()">上传视屏</el-button>
        <input type="file" ref="fileUpload" hidden @change="fileChange($event)">
      </el-form-item> -->
           
      <el-form-item label="修改时间">
               
        <el-input :disabled="true" v-model="form.createTime" style="width: 170px" />
             
      </el-form-item>
           
      <el-form-item label="描述">
               
        <el-input type="textarea" v-model="form.remark" style="width: 370px" />
             
      </el-form-item>

           
      <el-form-item label="">
                <el-button @click="save" type="primary">上传广告</el-button>    
         
      </el-form-item>
         
    </el-form>
     
  </div>
</template>

<script>
import { advert, saveadvert, upfile } from "@/api/yxSystemConfig";
import { uploadimg, imgurl } from "@/api/yxUser";
export default {
  // name: "Preview",
  data() {
    return {
      imageUrl: "",
      userinfo: {},

      form: {
        createTime: "",
        updateTime: null,
        id: null,
        name: "",
        weights: "",
        durationTime: null,
        remark: "",
        type: "",
        enable: true,
        systemAdvertisingPicture: [
          {
            id: null,
            pid: null,
            advertisingId: null,
            rul: null,
            advertisingOrder: null
          },
          {
            id: null,
            pid: null,
            advertisingId: null,
            rul: null,
            advertisingOrder: null
          },
          {
            id: null,
            pid: null,
            advertisingId: null,
            rul: null,
            advertisingOrder: null
          }
        ]
      },
      rules: {},
      dialogImageUrl: "",
      dialogVisible: false,
      interurl: "",
      fileList: [],
    };
  },
  created() {
    this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    console.log(this.userinfo.user.id);
  },
  mounted() {
    // this.adverts();
  },
  methods: {
    upLoad(file) {
      console.log("aaaaaaaaaaaaa", file);
      const formData = new FormData(); //通过form数据格式来传
      formData.append("file", file.file); //传文件
      formData.append("type", "avatar"); //传文件
      formData.append("path", "2022718"); //传文件
      console.log("bbb", formData);
      uploadimg(formData).then((res) => {
        imgurl(res.data).then((ress) => {
          console.log("imgurl", ress);
          this.imageUrl = ress;
          console.log("imgurlssss", this.imageUrl);
        });
        console.log(res);
        console.log("上传成功"); // if (res.code === "sys.success") { //     this.userInfoForm.avatar = this.fileServerUrl()+ res.data.fileSrc //     const previewImage = this.userInfoForm.avatar //     console.log("previewImage",previewImage) // } else { // this.$message('头像上传失败') // }
      });
    },
    save() {
      console.log("form", this.form);
      this.saveadverts();
      // this.$router.go(0);
    },
    saveadverts() {
      const data = this.form;
      saveadvert("ADVERTISING_WHEN_BOOT", data)
        .then((res) => {

          this.form = res.data;
          console.log("www", res);
          this.$message.success("上传广告成功")


        })
        .catch((err) => {
          console.log(err);
        });
    },

    // adverts() {
    //   advert("ADVERTISING_WHEN_BOOT")
    //     .then((res) => {
    //       this.form = res.data;
    //       console.log("ww222w", res.data);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // 点击上传，然后调用 startUpload 方法, 开始上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file, raw); // this.imageUrl = URL.createObjectURL(file.raw);
      console.log("12312313", res);
      console.log("file", file);
      console.log("handleAvatarSuccess", this.imageUrl);
      this.$message({
        type: "success",
        message: "上传成功",
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>